<template>
    <div class="error-container">
        <div class="error-card">
            <h1 class="error-code">403</h1>
            <p class="error-message">无权访问此页面</p>
            <p class="error-detail">
                抱歉，您没有权限执行此操作。<br>
                请联系管理员获取访问权限
            </p>
            <router-link to="/" class="home-button">
                返回首页
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ForbiddenPage'
}
</script>

<style scoped>
.error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f8f9fa;
}

.error-card {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}

.error-code {
    font-size: 6rem;
    color: #ff4444;
    margin-bottom: 1rem;
}

.error-message {
    font-size: 1.5rem;
    color: #666;
    margin-bottom: 2rem;
}

.home-button {
    display: inline-block;
    padding: 0.8rem 2rem;
    background-color: #409eff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.home-button:hover {
    background-color: #66b1ff;
}
</style>